<template>

    <!--图片上传方法-->
    <!--<el-upload
      :http-request="uploadImg"
      :headers="myHeaders"
      list-type="picture-card"
      :on-success="duil"
      :on-error="cuol"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>-->


  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">商品</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.name" placeholder="输入商品名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="goToPageNoArgs('/mall/GoodsInsert/')">添加</el-button>
      </el-form-item>
    </el-form>
    <!--批量删除按钮-->
    <el-button size="small" type="warning" icon="el-icon-delete-solid" @click="goodsDelete(multipleSelection)" style="margin-bottom: 10px">全部删除</el-button>
    <!--列表-->

    <!--    {-->
    <!--    managerAccountNumber:'manager001',-->
    <!--    managerName:'池松松',-->
    <!--    roleName:'超级管理员',-->
    <!--    managerGender:'1',-->
    <!--    insertTime:'2022-5-20 15:21',-->
    <!--    modifiedTime:'2022-5-20 15:21',-->
    <!--    }-->

    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中"   @selection-change="handleSelectionChange" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column type="index" sortable  label="序号" width="200" :index='indexMethod'>
      </el-table-column>
      <el-table-column sortable prop="number" label="编号" width="150">
      </el-table-column>
      <el-table-column sortable prop="name" label="商品名称" width="150">
      </el-table-column>
      <el-table-column sortable prop="brandName" label="品牌" width="100" :formatter="formatRole">
      </el-table-column>
      <el-table-column sortable prop="commentCount" label="评价数" width="220">
        <template slot-scope="scope">
          <el-button @click="goToPage(scope.row,'/mall/GoodsComment/')">{{scope.row.commentCount}}</el-button>
        </template>
      </el-table-column>
      <el-table-column sortable prop="price" label="价格" width="220">
      </el-table-column>
      <el-table-column sortable prop="logistics" label="物流" width="220" :formatter="formatRole1">
      </el-table-column>
      <el-table-column  label="上架" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeState(scope.row)"
           >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column sortable prop="insertTime" label="添加时间" width="220">
      </el-table-column>
      <el-table-column sortable prop="modifiedTime" label="修改时间" width="220">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button size="mini" @click="goToPage(scope.row,'/mall/GoodsDetail/')">详情</el-button>
          <!--/*scope.$index,*/-->
          <el-button size="mini" type="danger" @click="goodsDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:childMsg="pageparm" @callFather="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="管理员账号" prop="managerAccountNumber">
          <el-input size="small" v-model="editForm.managerAccountNumber" auto-complete="off" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item label="管理员名称" prop="managerName">
          <el-input size="small" v-model="editForm.managerName" auto-complete="off" placeholder="请输入部门代码"></el-input>
        </el-form-item>
        <el-form-item label="管理员角色" prop="roleNumber">
          <el-select size="small" v-model="editForm.roleNumber" auto-complete="off" placeholder="请选择">
            <el-option v-for="type in roles" :label="type.roleName"  :value="type.roleNumber" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员性别" prop="managerGender">
          <!--          <el-radio v-model="editForm.managerGender" value="1" label="男">男</el-radio>-->
          <!--          <el-radio v-model="editForm.managerGender" value="0" label="女">女</el-radio>-->
          <el-radio-group v-model="editForm.managerGender">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {testOss,goodsList,goodsChangeState,goodsDeletes} from "../../api/mallMG.js";
import Pagination from '../../components/Pagination'
import {managerDel} from "../../api/personnelMG";
export default {
  name: "Brand",
  data(){
    return {
      value1:true,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        managerAccountNumber: '',
        managerName: '',
        roleNumber: '',
        managerGender: '',
        token: localStorage.getItem('logintoken')
      },
      // rules表单验证
      rules: {
        managerAccountNumber: [{ required: true, message: '请输入管理员名称', trigger: 'blur' }],
        managerName: [{ required: true, message: '请输入管理员名称', trigger: 'blur' }],
        roleNumber:[{required: true, message: '请选择',trigger: 'blur'}],
        managerGender:[{required: true, message: '请选择',trigger: 'blur'}]
      },
      formInline: {
        page: 1,
        limit: 10,
        name: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [
        {
          number:'123',
          name:'百事可乐',
          brandName:'可口可乐',
          commentCount:'16',
          price:'20',
          //1-普通，2-门店自提，3-国外直邮
          logistics:1,
          //状态(0-未上架 1-已上架)
          state:1,
        }
      ], //用户数据
      currentRow:null,
      multipleSelection:[],
      roles:[
        {
          roleNumber:'001',
          roleName:"超级管理员"
        }
      ],
      // 分页参数
      pageparm: {
        currentPage: 0,
        pageSize: 10,
        total: 0
      },


      dialogImageUrl: '',
      dialogVisible: false,
      myHeaders:{'Access-Control-Allow-Origin':'*'}
    };
  },
  created() {
    this.goodsList(this.formInline)
  },
  components: {
    Pagination
  },
  methods: {
    // openClick(){
    //
    //   //alert("666")
    //   this.value1=!this.value1
    //   //this.value1=false
    //   alert(this.value1)
    // },
    goToPage(row,url){
      this.$router.push(url+row.id)
    },
    goToPageNoArgs(url){
      this.$router.push(url)
    },
    formatRole1:function(row,column){
      if(row.logistics==1){
        return "普通快递"
      }
      else if(row.logistics==2){
        return "国外直邮"
      }
      else if(row.logistics==3){
        return "门店自提"
      }
      return ""
    },

    /*列表*/
    goodsList(data){
      this.loading = true
      goodsList(data).then(res=>{
        console.log(JSON.stringify(res.data.data))
        let tagObject=res.data.data
        this.listData = tagObject.list
        this.pageparm.currentPage = tagObject.pageNum;
        this.pageparm.pageSize = tagObject.pageSize
        this.pageparm.total = tagObject.total;
        this.formInline.page = tagObject.pageNum;
        this.formInline.limit = tagObject.pageSize
        this.loading = false
      }).catch(error=>{
        alert(JSON.stringify(error))
      })
    },
    /*更改上下架状态*/
    changeState(row){
      this.loading=true;
      goodsChangeState({id:row.id}).then(res=>{

        if(res.success){
          this.loading=false;
          let state=row.state?'上架':'下架'
          this.$notify({
            title: '成功',
            message: row.name+'已经'+state,
            type: 'success'
          });
        }else{
          this.loading=false;
          this.$notify({
            title: '失败',
            message: row.name+'修改失败',
            type: 'warning'
          });
        }
      }).catch(error=>{
        alert(error)
      })
    },
    // 批量删除
    goodsDelete(row){
      let rows=[];
      if(Array.isArray( row)){
        rows=row
      }else{
        rows.push(row)
      }
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let managerAccountNumbers=[]
        rows.forEach(goods=>{
          //alert(JSON.stringify(goods))
          managerAccountNumbers.push(goods.id)
        })
        let param={ids:managerAccountNumbers}
        this.loading=true
        alert(JSON.stringify(param))
        goodsDeletes(param).then(res=>{
          if(res.success){
            this.loading=false
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            goodsList()
          }else{
            let managerAccountNumbers=res.data
            this.loading=false
            this.$message({
              type: 'error',
              message: '删除失败，未删除的:'+JSON.stringify(managerAccountNumbers)
            })
          }
          this.getData(this.formInline)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 多选框
    handleSelectionChange(val){
      this.multipleSelection=val;
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.goodsList(this.formInline)
    },
    // 显示序列号
    indexMethod(index){

      let curpage = this.pageparm.currentPage; //单前页码，具体看组件取值
      let limitpage = this.pageparm.pageSize; //每页条数，具体是组件取值
      return index + 1 + (curpage - 1) * limitpage;
    },
    //图片上传方法
    /*uploadImg(param){
      const formData = new FormData()
      formData.append('file', param.file)
      alert(formData)
      this.$axios.post("/management-mall/leyou.mall/mall-goods/test/oss",formData,{
        'Content-type' : 'multipart/form-data'
      }).then(response => {
          console.log(response.data)

      })


    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    cuol(res,file){
      alert(JSON.stringify(res))
      alert(JSON.stringify(file))
    },
    duil(res,file){
      alert(JSON.stringify(res))
      alert(JSON.stringify(file))
    }*/

  }
}
</script>

<style>

.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>
